<template>
	<page-meta :page-style="'overflow:hidden'">
		<gzPageWrapper ref="gzPageWrapperRef"
			:styles="{ background: '#F7F8FB url(https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0adfb7f0-d371-4583-bea9-300731b6eb86.png) no-repeat 0 0 / 100% 504rpx', backgroundColor: '#f2f4f5' }"
			:up="{ use: true, auto: false, isLock: true, empty: { use: false } }" :down="{ auto: false }"
			:nav="{ use: false }" @upCallback="upCallback">
			<template #top>
				<view style="position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;" :style="{ height: `${navbarHeight}px`, marginTop: `${statusBarHeight}px`}">
					<view class="navTitle" v-if="vdata.fansInfo.inSearch ==1">
						<view class="assetMonth">
							您的上月资产汇算中
						</view>
					</view>
				</view>
			</template>
			<template #default>
				<view class="header">
					<view class="headerInfo" :class="assetLevelClass" @click="loginClick">
						<view class="personInfo">
							<view class="top">
								<view class="left">
									<view class="avator">
										<button v-if="vdata.isLogin" plain class="btn" style="border: none;width: 106rpx;height: 106rpx;padding: initial;"open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
											<image style="width: 106rpx;height: 106rpx;border-radius: 50%;margin-left: 0;overflow: none;padding: initial;" class="head_img1" :src="vdata.fansInfo.headPic || '../../static/new/user/default-head.png'" />
										</button>
										<button v-else plain class="btn" style="border: none;width: 106rpx;height: 106rpx;padding: initial;">
											<image class="head_img1" :src="vdata.fansInfo.headPic || '../../static/new/user/default-head.png'" />
										</button>
									</view>
									<view class="rightInfo">
										<view class="phone">
											{{ vdata.fansInfo.nickName?vdata.fansInfo.nickName:vdata.fansInfo.phone?(vdata.fansInfo.phone.substring(0, 3) + '****' +vdata.fansInfo.phone?.substring(7, 11)):'请登录/注册' }}
										</view>
										<view class="isRealName">
											<uni-icons type="vip-filled" color="#fff" size="16"></uni-icons>
											<view>{{ vdata.fansInfo.isAuth === 0  ? '已实名' : '非实名' }}</view>
										</view>
									</view>
								</view>
								<!-- <view v-if="vdata.isLogin" class="right" @click="lookEquity">
									<view>查看权益</view>
									<view class="imgArrowRight"></view>
								</view> -->
							</view>
							<view class="memeberCode" @click="onOpenQrcode">
								<view class="image"></view>
								<view class="text">会员码</view>
							</view>
		
							<view class="bottom" >
								<view class="fromData" v-if="vdata.fansInfo.assetLevelDate">
									数据来源{{vdata.fansInfo.assetLevelDate}}
								</view>
							</view>
							
							<view class="scoreCate">
								<template v-if="!vdata.isLogin || vdata.fansInfo.assetLevel === void 0">
									<view class="left">
										暂未畅享平台会员权益
									</view>
									<view class="right"></view>
								</template>
								<!-- #ifdef MP-YHDD -->
								<template v-else-if="vdata.fansInfo.assetLevel == '0' || vdata.fansInfo.assetLevel == '1'">
									<view class="left">
										畅享平台实名会员权益
									</view>
									<view class="right"></view>
								</template>
								<!-- #endif -->
								<template v-else>
									<view class="left">
										每月可享受{{vdata.fansInfo.levelScore}}福分
									</view>
									<!-- #ifdef MP-YHDD -->
									<view class="right">
										畅享平台{{ vdata.fansInfo.assetLevel == '2' ? '金桂' : vdata.fansInfo.assetLevel == '3' ? '富嘉' : vdata.fansInfo.assetLevel == '4' ? '钻石' : '鼎福' }}会员权益
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-YHDD -->
									<view class="right">
										畅享平台{{ vdata.fansInfo.assetLevel == '1' ? '价值' : vdata.fansInfo.assetLevel == '2' ? '金桂' : vdata.fansInfo.assetLevel == '3' ? '富嘉' : vdata.fansInfo.assetLevel == '4' ? '钻石' : '鼎福' }}会员权益
									</view>
									<!-- #endif -->
								</template>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 邀请好友 -->
					<!-- <view class="invite">
						<view class="text">
							<view class="title">邀请好友赢大额优惠券</view>
							<view class="desc">还有更多好礼等你拿</view>
						</view>
						<view class="btn" @tap="toUrl('/pageUser/invite/index')">
							去邀请
						</view>
					</view> -->
					<!-- 福分福券 -->
					<view class="block">
						<view class="title">
							<image src="@/static/new/user/score-coupon.png" />
							<text>权益奖励</text>
						</view>
						<view class="list">
							<view @tap="scoreList">
								<!-- #ifdef MP-YHDD -->
								<text v-if="vdata.fansProperty.score" class="num">{{ vdata.fansProperty.score > 99 ? '99+' : vdata.fansProperty.score }}</text>
								<!-- #endif -->
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ad14831b-e0c4-4527-a105-2c79fb639fc7.png">
								</image>
								<text class="name">福分</text>
							</view>
							<view @tap="couponList(1,0)">
								<text v-if="vdata.fansProperty.coupon" class="num">{{ vdata.fansProperty.coupon }}</text>
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/704de8a6-b5bf-4c46-ae8c-be321827044b.png">
								</image>
								<text class="name">待使用福券</text>
							</view>
							<view @tap="couponList(0,3)">
								<text v-if="vdata.fansProperty.couponWaitOn"
									class="num">{{ vdata.fansProperty.couponWaitOn }}</text>
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/72a0d2b4-cbaf-4e93-95c7-7b442abb5196.png">
								</image>
								<text class="name">待激活福券</text>
							</view>
							<view @tap="toUrl('/pageUser/myAward/index')">
								<text v-if="vdata.fansProperty.goods" class="num">{{ vdata.fansProperty.goods }}</text>
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0dceffc1-0346-47b1-be30-e7c820c8c79b.png">
								</image>
								<text class="name">未核销奖品</text>
							</view>
							<!-- #ifdef MP-YHDD -->
							<view @tap="toUrl('/pageUser/myCDK/index')">
								<text v-if="vdata.fansProperty.cdkNum" class="num">{{ vdata.fansProperty.cdkNum }}</text>
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a090ee54-73fe-4b1b-a615-c8ecaaa31f93.png">
								</image>
								<text class="name">我的CDK</text>
							</view>
							<view @tap="toUrl('/pageUser/myTopUp/index')">
								<text v-if="vdata.fansProperty.rechargeNum" class="num">{{ vdata.fansProperty.rechargeNum }}</text>
								<image
									src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c26480f1-b66f-407a-8653-7ecf305c3a80.png">
								</image>
								<text class="name">待使用充值</text>
							</view>
							<!-- #endif -->
						</view>
					</view>
					<!-- 占位 -->
					<view style="height: 24rpx;"></view>
					<!-- 功能列表 -->
					<view class="block function-list">
						<view v-if="vdata.fansInfo.khjlAgentNo" class="item" @click="toUrl(`/marketing/index/index`)">
							<view class="left">
								<image :src="'../../static/new/user/agent.png'" mode=""></image>
								<text>机构展业工具【{{vdata.fansInfo.khjlAgentNo}}】</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view>
						
						<!-- #ifdef MP-YHDD -->
						<view v-if="vdata.fansInfo.isAuth !== 0" class="item" @click="toUrl(`/pageUser/realName/index`)">
							<view class="left">
								<image :src="'../../static/new/user/real-name.png'" mode=""></image>
								<text>权益会员实名</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view>
						<!-- #endif -->
						<view v-if="vdata.isBindMch" class="item" @click="toUrl(`/pageUser/mchQrcode/mchQrcode`)">
							<view class="left">
								<image :src="'../../static/new/user/mch-activity-qrcode.png'" mode=""></image>
								<text>我的商户领券码</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view>
						<!-- v-if="!vdata.fansInfo.mchNo" -->
						<!-- <view v-if="!vdata.fansInfo.mchNo" class="item" @click="toUrl(`/pageUser/bindMch/index`)">
							<view class="left">
								<image :src="'../../static/new/user/vip.png'" mode=""></image>
								<text>商户身份认证</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view> -->
						<!-- onOpenQrcode1 -->
						<!-- v-if="vdata.fansInfo.mchNo" -->
						<!-- <view v-if="vdata.fansInfo.mchNo"  class="item" @click="gotomchList">
							<view class="left">
								<image :src="'../../static/new/user/mch-coupon-qrcode.png'" mode=""></image>
								<text>商户活动码</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view> -->
						
						<view v-for="item in vdata.routeList" class="item" @click="toUrl(item.url)">
							<view class="left">
								<image :src="item.img" mode=""></image>
								<text>{{ item.text }}</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view>
						<view class="item" @click="toSetting">
							<view class="left">
								<image src='../../static/new/user/setting.png' mode=""></image>
								<text>设置</text>
							</view>
							<image class="right" src="@/static/new/arrow-right.png"></image>
						</view>
					</view>
				</view>
				<!-- {{vdata.userId}}--{{vdata.fansId}}--{{vdata.fansInfo.mchNo}} -->
				<!-- <view v-if="version_number" style="position: relative;padding-bottom: 20rpx;text-align: center;color: #999;font-size: 28rpx;">版本号：{{ version_number }}</view> -->
				<view class="bottom-btn" @click="loginClick('btn')">{{ vdata.isLogin ? '退出登录' : '立即登录' }}</view>
				<view style="text-align: center;font-size: 28rpx;color: #999;margin: 20rpx 0;">版本号：{{ version_number }}
				</view>
			</template>
		</gzPageWrapper>
	</page-meta>
	<!-- 用户二维码弹窗 -->
	<uni-popup ref="qrcodePopupRef" type="center" :mask-click="true" @change="onPopupChange">
		<view style="padding: 40rpx;background: #fff;border-radius: 20rpx;">
			<view style="margin-bottom: 20rpx;text-align: center;">会员码</view>
			<image
				:src="tool.drawQRcode(JSON.stringify({userId:vdata.userId,fansId:vdata.fansId,mchNo:vdata.fansInfo.mchNo}))"
				style="width: 400rpx;height: 400rpx;"></image>
			<!-- <image :src="tool.drawQRcode(JSON.stringify({userId:'3',fansId:'2',mchNo:'M1693470631'}))" style="width: 400rpx;height: 400rpx;"></image> -->
			<view class="bottomPsd" @click="copy(vdata.fansInfo.openId)">
				<text>{{interString(vdata.fansInfo.openId)}}</text>
				<image style="width: 28rpx;height: 28rpx;"
					src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/13dfd4d7-12c6-4319-a653-8b7606007980.png"></image>
			</view>
			
		</view>
	</uni-popup>
	<!-- 用户活动码弹窗 -->
	<uni-popup ref="qrcodePopupRef1" type="center" :mask-click="true">
		<!-- <image :src="code" mode=""></image> -->
		<view style="padding: 40rpx;background: #fff;border-radius: 20rpx;">
			<view style="margin-bottom: 20rpx;text-align: center;">商户活动码</view>
			<image :src="code" style="width: 400rpx;height: 400rpx;"></image>
			
		</view>
	</uni-popup>
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:value="vdata.fansInfo" v-model:isLogin="vdata.isLogin"></gzLoginPopup>
</template>


<script setup>
	import { onShow, onReady, onLoad, onHide, onUnload } from '@dcloudio/uni-app';
	import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue';
	import { $fansDetail, $scoreCoupon,$getRecord,$getCode, $userLoginExit, $ossFilesForm, $fansUpdate, $getBindMchCcInfo, $fansPay } from '@/http/apiManager.js';
	import storageManage from '@/util/storageManage.js'
	import appConfig from '@/config/appConfig.js'
	import tool from '@/util/tool.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	const statusBarHeight = ref(getApp().globalData.statusBarHeight)
	const navbarHeight = ref(getApp().globalData.navbarHeight)
	const gzPageWrapperRef = ref()
	const qrcodePopupRef = ref()
	const qrcodePopupRef1 = ref()
	const gzLoginPopupRef = ref()

	const vdata = reactive({
		isLogin: false,	// 用户的登录状态
		isBindMch: false,	// 是否绑定商户
		fansInfo: {}, // 用户数据
		fansProperty: {},	// 用户资产
		routeList: [
			// { img: '../../static/new/user/vip.png', text: '商户信息认证', url: `/pageUser/bindMchCc/index`, checkLogin: true },	// 长春
			// { img: '../../static/new/user/real-name.png', text: '权益会员实名', url: `/pageUser/realName/index?isUser=${true}`, checkLogin: false, isShow: false },
			// { img: '../../static/new/user/vip.png', text: '商户身份认证', url: `/pageUser/bindMch/index`, checkLogin: false },
			// { img: '../../static/new/user/equity.png', text: '权益奖励', url: '/pageUser/equityReward/index', checkLogin: false },
			// { img: '../../static/new/user/reward.png', text: '鼓励金', url:'', checkLogin: false },
			{ img: '../../static/new/user/activity.png', text: '我参与的活动', url: '/pageUser/myActivity/index', checkLogin: false },
			// { img: '../../static/new/user/collection.png', text: '我的收藏', url:'/pageUser/myCollect/index', checkLogin: false },
			{ img: '../../static/new/user/icon-location.png', text: '我的地址', url: '/pageUser/myAddress/index', checkLogin: false },
			// { img: '../../static/new/user/help-center.png', text: '帮助中心', url:'/pageUser/invite/index', checkLogin: false },
			// { img: '../../static/new/user/help-center.png', text: '问题反馈', url:'/pageUser/feedBack/feedBack', checkLogin: false },
		],
		open: '0',	// 是否直接打开 会员码
	});
	// 条件编辑只在微信小程序显示
	// #ifdef MP-WEIXIN
	const accountInfo = wx.getAccountInfoSync();
	const version_number = accountInfo.miniProgram.version // 小程序 版本号
	// #endif

	const interString = (s) => {
		if (!s) {
			return '*************'
		} else {
			return s.slice(0, 3) + '******' + s.slice(-3)
		}
	}

	onLoad(async (options) => {
		// 更新登录状态
		vdata.isLogin = storageManage.isLogin()
		vdata.userId = storageManage.userId()
		vdata.fansId = storageManage.fansId()
		vdata.open = options.open
		
		// 注册页面通讯 在其他页面登录后 当前页面未刷新用户信息以及资产信息
		uni.$on('USER_REFRESH_USERINFO',refreshUserInfo)
		uni.$on('USER_REFRESH_SCORE',refreshUserScore)
		uni.$on('USER_REFRESH_MCH',getMchInfoCc)
		
		
		// 初始化 用户详情 以及 福分卡券信息
		if(vdata.isLogin){
			uni.showLoading({ title: '加载中...' })
			await getFansDetail()
			uni.hideLoading()
			await getScoreCoupon()	// 用户资产慢慢加载 不展示loading
			
		}
	})
	
	onUnload(() => {
		// 注销页面通讯
		uni.$off('USER_REFRESH_USERINFO')
		uni.$off('USER_REFRESH_SCORE')
		uni.$off('USER_REFRESH_MCH')
	})
	// 获取当前用户绑定信息
	async function getMchInfoCc(isRefresh = false){
		let mchInfo = [];	// 商户信息
		if(storageManage.MCHS_CC() && !isRefresh){
			mchInfo = storageManage.MCHS_CC()
		}else{
			// 本地缓存用户绑定商户信息
			const { bizData } = await $getBindMchCcInfo()
			storageManage.MCHS_CC(bizData)
			mchInfo = bizData
		}
		// 如果商户信息不为空则展示商户工具
		// if(mchInfo.length > 0){
		// 	Object.assign(vdata.routeList[0],{ text: '商户工具', url: '/pageUser/bindMchCc/mchTool' })
		// 	// 存在商户信息 展示商户领券码
		// 	vdata.isBindMch = true
		// }else{
		// 	Object.assign(vdata.routeList[0],{ text: '商户信息认证', url: '/pageUser/bindMchCc/index' })
		// 	vdata.isBindMch = false
		// }
	}
	// 更新用户信息
	function refreshUserInfo(){
		vdata.fansInfo = storageManage.userInfo()
	}
	
	// 更新福分数量
	async function refreshUserScore(){
		// 通过网络请求福分数量
		const { bizData } = await $scoreCoupon()
		Object.assign(vdata.fansProperty,bizData)
	}
	
	// 复制文本
	const copy = (item) => {
		uni.setClipboardData({ data: item })
	}

	// 登录状态
	onShow(async () => {
		// 更新登录状态
		vdata.isLogin = storageManage.isLogin()
		if(vdata.isLogin){
			getMchInfoCc()	// 查询用户商户绑定信息
		}
	})
	// 查看权益
	const lookEquity = () => {
		uni.navigateTo({
			url: '/pageUser/equityCenter/index'
		})
	}
	// 刷新用户详情
	async function refreshFansDetail(){
		const { bizData:fansInfo } = await $fansDetail()
		vdata.fansInfo = fansInfo
		storageManage.userInfo(fansInfo)
	}
	
	// 获取用户详情
	async function getFansDetail() {
		if(storageManage.userInfo()){
			vdata.fansInfo = storageManage.userInfo()
		}else{
			const { bizData:fansInfo } = await $fansDetail()
			vdata.fansInfo = fansInfo
			storageManage.userInfo(fansInfo)
		}
	}

	// 定义等级类名数组	// ''，价值，金桂，富嘉，钻石，鼎福
	// #ifdef MP-YHDD
	const assetLevelArr = ['sm','sm','jg','fj','zs','df']
	// #endif
	// #ifndef MP-YHDD
	const assetLevelArr = ['','jz','jg','fj','zs','df']
	// #endif

	// 根据详情中返回的用户会员等级 计算属性 顶部会员卡片的类名 动态调整样式
	const assetLevelClass = computed(() => {
		const { assetLevel } = vdata.fansInfo
		const {isAuth} = vdata.fansInfo
		const {inSearch} = vdata.fansInfo
		if(isAuth ==0){
			if(inSearch==0){
				if(assetLevelArr[assetLevel] === void 0){	// 如果assetLevel返回的不是0-5则说明是非实名用户	此时使用默认的样式即可
					return ''
				}
				return assetLevelArr[assetLevel]
			}else{
				return assetLevelArr[1]
			}
			
		}else{
			return ''
		}
		
	})
	// 获取用户资产
	async function getScoreCoupon(){
		const { bizData:fansProperty } = await $scoreCoupon()
		Object.assign(vdata.fansProperty,fansProperty)
		if(vdata.open === '1'){
			onOpenQrcode()
			vdata.open = '0'
		}
	}
	/**
	 * 展示用户个人码
	 */
	function onOpenQrcode(){
		// 判断用户是否登录
		if(!loginPopup()) return;
		if(!vdata.fansInfo.openId){
			$infoBox.toast('会员码生成失败，请退出登录后重试！')
			return
		}
		qrcodePopupRef.value.open()
		/* const ifcode = 'yspay'
		// 判断用户 银盛网页授权
		const ysOpenId = storageManage.openId(`${ifcode}-openId`)
		if(ysOpenId){	// 已授权直接打开会员码
			qrcodePopupRef.value.open()
		}else{	// 未授权 进行网页授权
			appConfig.url = appConfig.ysPayUrl
			getApp().globalData.temp_path = `/pages/user/user?open=${1}&type=tabbar`
			getApp().globalData.temp_ifcode = ifcode
			uni.reLaunch({
				url: '/pages/openid/openid'
			})
		} */
	}
	/**
	 * 用户码 打开关闭
	 */
	let timer = null
	function onPopupChange({ show }){
		if(show){	// 打开弹窗
			// 请求 卡券数量
			timer = setInterval(() => {
				$scoreCoupon().then(({ bizData }) => {
					if(bizData.coupon > vdata.fansProperty.coupon){
						qrcodePopupRef.value.close()
						$infoBox.toast('您收到了新的卡券')
						Object.assign(vdata.fansProperty,bizData)
					}
				})
			},3000)
		}else{
			if(timer){
				clearInterval(timer)
			}
		}
		
	}
	/**
	 * 页面关闭关闭弹窗
	 */
	onHide(() => {
		qrcodePopupRef.value.close()
	})
	// 商户活动码
	function onOpenQrcode1(){
		qrcodePopupRef1.value.open()
	}
	// 更新用户资料
	function updateUserInfo() {
		getApp().preventActive(()=>{
			if(!loginPopup()) return;
			uni.navigateTo({
				url: `/pageUser/fansInfo/index?isUser=${true}`
			})
		})
	}
	// 福分列表
	function scoreList() {
		getApp().preventActive(()=>{
			if(!loginPopup()) return;
			uni.navigateTo({
				url: '/pageUser/scoreRecords/index'
			})
		})
	}
	/**
	 * 跳转卡券列表页面 tabCurrent为列表选项卡下标 couponState为其对应的卡券状态
	 */
	function couponList(tabCurrent, couponState) {
		getApp().preventActive(()=>{
			if(!loginPopup()) return;
			uni.navigateTo({
				url: `/pageUser/myCoupon/index?tabCurrent=${tabCurrent}&couponState=${couponState}`
			})
		})
	}
	
	// 功能列表跳转
	function toUrl(url) {
		getApp().preventActive(()=>{
			if(!loginPopup()) return;
			uni.navigateTo({
				url
			})
		})
	}
	// 跳转设置页面
	function toSetting(){
		getApp().preventActive(()=>{
			uni.navigateTo({
				url: '/pageUser/setting/Setting'
			})
		})
	}
	
	// 用来保存二维码
	const code = ref('')
	// toUrl(`/pageUser/mchActivityCode/mchActivityCode?mchNo=${vdata.fansInfo.mchNo}`)
	const gotomchList = ()=>{
		getApp().preventActive(()=>{
			if(!loginPopup()) return;
			uni.showLoading({
				title:'加载中'
			})
			$getRecord({
				"activityId":0,
				"type":"0",
				"pathUrl":"pages/welcome/index",
				"otherJson":JSON.stringify({mchNo:vdata.fansInfo.mchNo,"agentNo":appConfig.agentNo})
			}).then(res=>{
				if(res.bizData){
					$getCode({qrcodeRecordId:res.bizData}).then(res=>{
						code.value = 'data:image/png;base64,' + res.bizData
						onOpenQrcode1()
						uni.hideLoading()
					})
				}
			})
		})
	}
	
	/**
	 * 登录 退出登录 操作
	 */
	function loginClick(type){
		getApp().preventActive(()=>{
			if(type === 'btn'){
				if(vdata.isLogin){	// 已登录 退出登录操作
					uni.showModal({
						title: '提示',
						content: '确定退出登录？',
						success({ cancel }) {
							if(cancel) return
							uni.showLoading({ title: '退出中' })
							$userLoginExit().then(() => {
								storageManage.token('',true)
								storageManage.dataKey('',true)
								storageManage.version('',true)
								uni.clearStorageSync()
								uni.createCacheManager().clearCaches()
								$infoBox.toast('退出成功',{ duration: 2000, mask: true })
								setTimeout(()=>{
									uni.reLaunch({
										url: '/pages/welcome/index'
									})
								},2000)
								// uni.hideLoading()
								// $infoBox.toast('退出成功')
								// storageManage.isLogin(false)
								// storageManage.userInfo(undefined,true)
								// vdata.isLogin = false
								// vdata.fansInfo = {}
								// vdata.fansProperty = {}
								// // 通知福分乐园页面进行初始化操作
								// uni.$emit('SCORE_INIT_PAGE')
							})
						}
					})
				}else{	// 未登录 登录操作
					gzLoginPopupRef.value.open()
				}
			}else{
				if(vdata.isLogin) return	// 已登录 不做操作
				// 未登录 弹出登录弹窗
				gzLoginPopupRef.value.open()
			}
		})
	}
	
	/**
	 * 判断用户是否登录并打开弹窗
	 */
	function loginPopup(){
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open()
			return false
		}
		return true
	}
	
	/**
	 * 下拉刷新
	 */
	async function upCallback(mescroll) {
		// 刷新用户详情
		mescroll.hideUpScroll()	// 隐藏上拉加载的布局
		// 校验用户是否登录
		if(!vdata.isLogin){
			mescroll.endSuccess(0)
			return
		}
		// 刷新用户详情 以及 资产状况
		try {
			uni.showLoading({ title: '加载中...' })
			await Promise.all([getMchInfoCc(true),refreshFansDetail(),getScoreCoupon()])
			uni.hideLoading()
			mescroll.endSuccess(0)
		} catch (e) {
			mescroll.endErr()
		}
	}
	
	/**
	 * 授权头像 相关函数 -----------------------------------------------------------------------------
	 */
	/**
	 * 用户授权头像
	 */
	function onChooseAvatar({ detail }){
		if(detail.avatarUrl){
			uni.getFileSystemManager().getFileInfo({
				filePath: detail.avatarUrl,
				success({ size }){
					$ossFilesForm({
						bizType: 'user',
						sourceFileName: getFileName(detail.avatarUrl),
						sourceFileSize: size
					}).then(({ bizData }) => {
						let url = bizData.formActionUrl
						let ossFileUrl = bizData.ossFileUrl
						// 调用图片上传方法
						uploadImg(detail.avatarUrl, url, bizData.formParams, ossFileUrl)
					
					})
				}
			})
		}
	}
	function uploadImg(tempFilePath, url, formParams, ossFileUrl) {
	
		const token = storageManage.token()
	
		uni.showLoading({ title: '上传中...' });
		//循环上传图片
		
		uni.uploadFile({
			url: url,
			filePath: tempFilePath,
			name: 'file',
			header: {
				'Content-Type':'multipart/form-data'
			},
			formData: formParams,
			// 代表完成的函数 注：此处可以传入三个函数  success （成功）/ fail（失败） / complete （完成）
			complete(res) {
				if (res.statusCode != 200 && res.statusCode != 204) {
					$infoBox.toast('请求失败，请重试')
					return
				}
				$fansUpdate({ headPic: ossFileUrl }).then(res => {
					vdata.fansInfo.headPic = ossFileUrl
					storageManage.userInfo({ ...storageManage.userInfo(), headPic: ossFileUrl })
					uni.hideLoading()
				})
			}
		})
	}
	/**
	 * 获取文件名称
	 */
	function getFileName(name){
	  if(!name){
	    return name
	  }
	  return name.substring(name.lastIndexOf('/') + 1)
	}
	
</script>
<style lang="less">
	// 定义所有卡片字体颜色变量
	@default-color: #367F99;	// 默认字体颜色
	@jz-color: #A15B20;	// 价值字体颜色
	@sm-color: #A15B20;	// 实名字体颜色
	@jg-color: #CB762D;	// 金桂字体颜色
	@fj-color: #2E54E2;	// 富嘉字体颜色
	@zs-color: #4E3AF1;	// 钻石字体颜色
	@df-color: #FFFFFF;	// 鼎福字体颜色
	
	// 实名标签 渐变背景
	@default-auth-gradient-bg: linear-gradient(90deg, #70B4CC 0%, #367F99 100%);	// 默认渐变背景
	@jz-auth-gradient-bg: linear-gradient(90deg, #D4782A 0%, #A15B20 100%);	// 价值渐变背景
	@sm-auth-gradient-bg: linear-gradient(90deg, #D4782A 0%, #A15B20 100%);	// 实名渐变背景
	@jg-auth-gradient-bg: linear-gradient(90deg, #DB9F38 0%, #CA752D 100%);	// 金桂渐变背景
	@fj-auth-gradient-bg: linear-gradient(90deg, #7390FF 0%, #2D52E1 100%);	// 富嘉渐变背景
	@zs-auth-gradient-bg: linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%);	// 钻石渐变背景
	@df-auth-gradient-bg: linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%);	// 鼎福渐变背景
	
	.bottomPsd {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12rpx;
	}
	.navTitle{
		display: flex;
		justify-content: center;
		align-items: center;
		.assetMonth{
			// width: 100%;
			// width: 310rpx;
			white-space: nowrap;
			color: white;
			height: 40rpx;
			padding: 0 10rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: rgba(0, 0, 0, .4);
		}
		
	}
	

	.header {
		width: 100%;
		padding-bottom: 125rpx;
		// background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0adfb7f0-d371-4583-bea9-300731b6eb86.png');
		background-size: 100% 504rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		padding: 0 32rpx;
		box-sizing: border-box;

		.headerInfo {
			width: 100%;
			height: 385rpx;
			position: relative;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e6af889d-ecdc-4ff1-abbf-8515cf4c41ad.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: 0 0;
			color: @default-color;	// 默认字体颜色 子元素 继承字体颜色
			
			.personInfo{
				width: 100%;
				height: 100%;
				padding: 40rpx 40rpx 40rpx 40rpx;
				box-sizing: border-box;
				position: relative;
				.scoreCate {
					width: calc(100% - 80rpx);
					position: absolute;
					bottom: 40rpx;
					left: 40rpx;
					display: flex;
					justify-content: space-between;
					.left {
						font-weight: 500;
						font-size: 28rpx;
					}
					.right {
						font-weight: 400;
						font-size: 24rpx;
					}
				}
				.memeberCode {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 40rpx;
					bottom: 90rpx;
					gap: 8rpx;
					
					.image{
						width: 52rpx;
						height: 52rpx;
						background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/26e5a11b-ccc4-4db9-a4e5-3444a27e98c6.png');
						background-size: 100% 100%;
						background-position: 0 0;
						background-repeat: no-repeat;
					}
				
					.text {
						font-weight: 500;
						font-size: 28rpx;
					}
				}
				
				.bottom {
				
					display: flex;
					font-weight: 400;
					font-size: 24rpx;
					position: absolute;
					// 93rpx
					bottom: 85rpx;
					.fromData{
						width: 100%;
						margin-right: 50rpx;
					}

				}
				
				.isRealName {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 112rpx;
					height: 36rpx;
					background: @default-auth-gradient-bg;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #EEF1F3;
				}
				.top{
					width: 100%;
					height: 182rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					.left {
						display: flex;
						.avator {
							width: 106rpx;
							height: 106rpx;
							// border-radius: 50%;
							.btn {
								width: 100% !important;
								height: 100% !important;
								display: flex;
								justify-content: center;
								align-items: center;
								// border: none;
								.head_img1 {
									width: 106rpx !important;
									height: 106rpx !important;
									// border-radius: 50%;
								}
							}
						}
						.rightInfo {
							margin-left: 32rpx;
							.phone {
								font-weight: 500;
								font-size: 36rpx;
							}
						}
					}
					.right{
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						gap: 16rpx;
						.imgArrowRight{
							width: 8rpx;
							height: 16rpx;
							background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7b5c3a80-7076-4b40-87ba-b32bf7ae7021.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							background-position: 0 0;
						}
					}
				}
			}
			&.sm {	// 实名用户卡片背景图
				background-image: url('https://hn-jrst.obs.cn-hazz1.ctyun.cn/yx/4747ae7f-8576-4cad-9c16-0f23d607609e.png');
				color: @sm-color;
				.memeberCode .image{
					background-image: url('https://hn-jrst.obs.cn-hazz1.ctyun.cn/yx/e9b62085-bb9b-4cee-a981-9dfb5c6e7a26.png');
				}
				.isRealName{
					background: @sm-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://hn-jrst.obs.cn-hazz1.ctyun.cn/yx/2a636061-b835-42fe-9cea-4df284079a07.png');
				}
			}
			&.jz {	// 价值用户卡片背景图
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b513be73-4b1d-4777-9d0a-44b5ee044e8b.png');
				color: @jz-color;
				.memeberCode .image{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e9b62085-bb9b-4cee-a981-9dfb5c6e7a26.png');
				}
				.isRealName{
					background: @jz-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2a636061-b835-42fe-9cea-4df284079a07.png');
				}
			}
			&.jg {
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/652ee5cb-a6d1-47fb-941f-3024828ddc19.png');
				color: @jg-color;
				.memeberCode .image{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3541a321-ced3-42e3-9b65-8ac6fc8d2f2a.png');
				}
				.isRealName{
					background: @jg-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/05b01625-5863-4f49-8bea-c2f4c43cdca2.png');
				}
			}
			&.fj {
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cf80f0bb-c1b7-46c2-99aa-4c902425bb5f.png');
				color: @fj-color;
				.memeberCode .image{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d8ca59ae-dc78-4a4a-8463-b8b860c2c881.png');
				}
				.isRealName{
					background: @fj-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6cbe01c0-9dbb-4908-9106-79d1282af464.png');
				}
			}
			&.zs {
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fa709348-57cf-4470-86ba-ee94a752b6db.png');
				color: @zs-color;
				.memeberCode .image{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b3837b6f-942e-46e0-b7d7-5c8186cea911.png');
				}
				.isRealName{
					background: @zs-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5d8ae30f-7d9e-4257-a5b5-0ee314ab10d9.png');
				}
			}
			&.df {
				background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0d02f694-ee9c-4a7f-929b-2dd02f5db24c.png');
				color: @df-color;
				.memeberCode .image{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ec517523-f133-48e0-80e9-db59538f76ca.png');
				}
				.isRealName{
					background: @df-auth-gradient-bg;
				}
				.top .right .imgArrowRight{
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/23d6a979-279a-4fd3-8b68-1c18d5e57b86.png');
				}
			}
		}
	}
	
	.content {
		background-color: #F2F4F5;
		padding: 32rpx;
		border-radius: 30rpx;
		// box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.07);
		overflow: initial;
		position: relative;
		// top: -95rpx;
	
		.invite {
			width: calc(100% - 64rpx);
			height: 136rpx;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/297c1142-7130-4eb0-aca3-74b242ac5ce4.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 0;
			display: flex;
			align-items: center;
			position: absolute;
			top: -125rpx;
			z-index: 3;
	
			.text {
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 132rpx;
	
				.title {
					font-size: 38rpx;
					font-family: YouSheBiaoTiHei;
				}
	
				.desc {
					font-size: 22rpx;
					margin-top: 16rpx;
				}
			}
	
			.btn {
				font-weight: 500;
				font-size: 24rpx;
				color: #A64F1C;
				font-style: normal;
				width: 120rpx;
				height: 60rpx;
				background: linear-gradient(270deg, #FEB6A4 0%, #FFF2E0 100%);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 46rpx;
			}
		}
	
		.block {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx;
	
			.title {
				display: flex;
				align-items: center;
				gap: 12rpx;
	
				image {
					width: 36rpx;
					height: 36rpx;
				}
	
				text {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}
	
			.list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
	
				&>view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 25%;
					position: relative;
					margin-top: 20rpx;
					.num{
						position: absolute;
						top: -10rpx;
						right: 0;
						background: #F7524F;
						color: #fff;
						font-size: 24rpx;
						border-radius: 8rpx;
						width: 50rpx;
						height: 30rpx;
						text-align: center;
						line-height: 30rpx;
						left: 50%;
					}
					image{
						width: 50rpx;
						height: 50rpx;
					}
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
	
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.left {
					display: flex;
					align-items: center;
					gap: 24rpx;
	
					image {
						width: 36rpx;
						height: 36rpx;
					}
	
					text {
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}
				}
	
				.right {
					width: 12rpx;
					height: 20rpx;
				}
			}
	
		}
	
		.function-list {
			display: flex;
			flex-direction: column;
			gap: 72rpx;
		}
	}
	
	.bottom-btn{
		padding: 20rpx 0;
		box-sizing: border-box;
		width: calc(100% - 64rpx);
		margin: 32rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 16rpx;
	}
	:deep(.mescroll-upwarp) {
		display: none !important;
	}
</style>